<template>
	<view class="custom-tabbar">
		<view 
			v-for="(item, index) in tabList" 
			:key="index"
			class="tab-item"
			:class="{ active: currentIndex === index }"
			@click="switchTab(index)"
		>
			<uni-icons 
				:type="item.icon" 
				:size="22" 
				:color="currentIndex === index ? activeColor : normalColor"
			></uni-icons>
			<text 
				class="tab-text"
				:style="{ color: currentIndex === index ? activeColor : normalColor }"
			>
				{{ item.text }}
			</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CustomTabbar',
	props: {
		current: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			currentIndex: 0,
			normalColor: '#999999',
			activeColor: '#ff6b35',
			tabList: [
				{
					text: '首页',
					icon: 'home',
					pagePath: '/pages/index/index'
				},
				{
					text: '分类',
					icon: 'bars',
					pagePath: '/pages/category/category'
				},
				{
					text: '我的信息',
					icon: 'person',
					pagePath: '/pages/profile/profile'
				}
			]
		}
	},
	watch: {
		current: {
			handler(newVal) {
				this.currentIndex = newVal
			},
			immediate: true
		}
	},
	methods: {
		switchTab(index) {
			if (index === this.currentIndex) return

			const tabItem = this.tabList[index]
			// 使用 reLaunch 确保页面切换正常
			uni.reLaunch({
				url: tabItem.pagePath
			})
		}
	}
}
</script>

<style scoped>
.custom-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #ffffff;
	border-top: 1rpx solid #e0e0e0;
	display: flex;
	align-items: center;
	z-index: 1000;
	/* 适配安全区域 */
	padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10rpx 0;
	transition: all 0.3s ease;
}

.tab-item.active {
	transform: scale(1.05);
}

.tab-text {
	font-size: 20rpx;
	margin-top: 8rpx;
	transition: color 0.3s ease;
}
</style>
